<template>
  <view style="height: auto;position: relative ">
    <view>
      <image style="width: 100%;margin-top: -110rpx" :src="require('../images/area.jpg')"></image>
    </view>
    <view class="content">
      <view class="title" style="">当前税局所在地维护状态</view>
      <view class="area-title">
        <view>地区</view>
        <view>发票信息</view>
        <view>税务信息</view>
      </view>
      <view class="area-box">
        <view :style="{ background: (index + 1) % 2 == 0 ? '#F1F5F9' : '' }" v-for="(item, index) in areaList"
          :key="index">
          <view class="area-item">
            <view>{{ item.name }}</view>
            <view>
              <text :class="item.invoiceStatus == 1 ? 'blue' : 'red'"></text>
              <text>{{ item.invoiceStatus == 1 ? '正常使用' : '维护中' }}</text>
            </view>
            <view>
              <text :class="item.taxStatus == 1 ? 'green' : 'red'"></text>
              <text>{{ item.taxStatus == 1 ? '正常使用' : '维护中' }}</text>
            </view>
          </view>
          <view v-if="item.invoiceStatus != 1 && item.taxStatus != 1 && item.startTime && item.endTime"
            style="display: flex; align-items: center; justify-content: space-between">
            <view style=" font-size: 26rpx; color: #999;text-align: center; padding: 10rpx 0; width: 33%"></view>
            <view style="font-size: 26rpx;color: #999;text-align:center; padding: 10rpx 0; width: 66%">
              维护时间起：{{ item.startTime }}</view>
          </view>
          <view v-if="item.invoiceStatus != 1 && item.taxStatus != 1 && item.startTime && item.endTime"
            style="display: flex; align-items: center; justify-content: space-between">
            <view style=" font-size: 26rpx; color: #999; text-align: center; padding: 10rpx 0; width: 33%"></view>
            <view style=" font-size: 26rpx; color: #999; text-align:center; padding: 10rpx 0; width: 66%">
              维护时间止：{{ item.endTime }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getProviceListApi, } from '@/api/taxDetail.js'
import store from "@/store";
import share from "@/utils/share";
import residenceTime from "@/mixins/residenceTime";
export default {
  mixins: [residenceTime],
  data() {
    return {
      areaList: []
    }
  },
  methods: {
    pageViewTrack(stayTime) {
      const route = this.$util.getCurrentRoute()
      		let params = {
			      Um_Key_SourcePage: route.path,
			      Um_Key_Duration: stayTime,
		      }
         this.$umaTrack.pageViewTrack(params)
    },
  },
  onLoad() {
    // #ifdef H5
    share.getShareConfig({}, this.$WXMENU);
    // #endif
    getProviceListApi().then(res => {
      this.areaList = res.data
    })
  }
}
</script>



<style scoped lang="scss">
.title {
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.content {
  background: white;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  border-radius: 20rpx;
  width: 93%;
  position: absolute;
  left: 30rpx;
  top: 30rpx;
  z-index: 9;
}

.area-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #F1F5F9;
  padding: 10rpx 30rpx;

  >view {
    text-align: center;
    color: #488AFD;
    width: 28%;
  }
}

.area-box {
  .area-item {
    //width: 100%;
    display: flex;
    min-height: 80rpx;
    line-height: 80rpx;
    justify-content: space-between;
    align-items: center;

    >view {
      text-align: center;
      width: 33%;
      line-height: 40rpx;
      padding: 10rpx 0;

      >text {
        &:nth-child(1) {
          //display: inline-block;
          //width: 10rpx;
          //height: 10rpx;
          //background: #ff0000;
          //border-radius: 50%;
          //vertical-align: middle;
          //margin-right: 5rpx;
        }
      }
    }
  }
}

.red {
  display: inline-block;
  width: 10rpx;
  height: 10rpx;
  background: #ff0000;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5rpx;
}

.blue {
  display: inline-block;
  width: 10rpx;
  height: 10rpx;
  background: #488AFD;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5rpx;
}

.green {
  display: inline-block;
  width: 10rpx;
  height: 10rpx;
  background: #51C3A5;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5rpx;
}
</style>